<template>
  <div>
    <el-dialog :title='option.title' :visible.sync='isShow' @close="closeUser" width="890px" @open="openCreate"
      :close-on-click-modal="false" center>
      <div v-loading="loading">
        <div class="content">
          <el-card>
            <el-form size="mini" ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="IMAGENO" label="图片号">
                    <el-input v-model.trim="form.IMAGENO" placeholder="请输入图片号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="IMAGENAME" label="图片名字">
                    <el-input v-model.trim="form.IMAGENAME" placeholder="请输入图片名字"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="TYPE" label="图片类型">
                    <el-select v-model="form.TYPE" filterable placeholder="请选择图片类型">
                      <el-option v-for="item in option.typeOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                        :value="item.FIELDKEY"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="18" class="imageIconStyle">
                  <el-form-item prop="URL" label="图片">
                    <el-col :span="24">
                      <el-upload class="avatar-uploader" :action="fileUploadUrl" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip">*只能上传jpg/png/bpm文件，且不超过10M,图标大小为16px*16px</div>
                      </el-upload>
                    </el-col>
                    <el-col :span="6" :offset="2" v-if="form.URL!=''">
                      <div style="width: 100px; height: 100px;background-color:#e4eaef;text-align:center;line-height:100px;">
                        <el-image :src="imageUrl"></el-image>
                      </div>
                    </el-col>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item prop="IMAGEDESC" label="图片描述">
                    <el-input v-model.trim="form.IMAGEDESC" type="textarea" :rows="2" placeholder="请输入图片描述"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item prop="REMARK1" label="备注">
                    <el-input v-model.trim="form.REMARK1" type="textarea" :rows="2" placeholder="请输入备注"></el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="22">
                  <el-form-item prop="REMARK2" label="备注2">
                    <el-input v-model="form.REMARK2" type="textarea" :rows="2" placeholder="请输入备注2"></el-input>
                  </el-form-item>
                </el-col> -->
              </el-row>

            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click='addType'>取消</el-button>
            <el-button type="primary" size="mini" @click="add">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  // import request1 from "@/common/utils/requestTest";
  import requestYg from "@/common/utils/requestYg";
  import toolBox from "@/common/utils/toolBox";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import manage from "@/message/siteManagement/iconManage/iconManage";

  export default {
    name: "",
    data() {
      return {
        imageUrl: '',
        fileUploadUrl: '',
        loading: false,
        CHACEFLAGLIST: [{
            name: "是",
            value: "1"
          },
          {
            name: "否",
            value: "0"
          },
        ],
        STATUSLIST: [{
            name: "有效",
            value: "1"
          },
          {
            name: "无效",
            value: "0"
          },


        ],
        form: {
          IMAGENAME: '',
          TYPE: "",
          IMAGENO: "",
          IMAGEDESC: '',
          URL: '',
          REMARK1: '',
          REMARK2: ''
        },
        rules: {
          REMARK1: [
            {  max: 100, message: '长度不超过100 个字符', trigger: 'blur' }
          ],
          TYPE: [{
            required: true,
            message: "请选择图片类型",
            trigger: "change"
          }],
          URL: [{
            required: true,
            message: "请选择图片URL",
            trigger: "change"
          }],
          IMAGENO: [{
            required: true,
            message: "请输入图片号",
            trigger: "blur"
          }],
          IMAGENAME: [{
            required: true,
            message: "请输入图片名字",
            trigger: "blur"
          },
          {  max: 100, message: '长度不超过100 个字符', trigger: 'blur' }

          ],
          IMAGEDESC: [{
            required: true,
            message: "请输入图片描述",
            trigger: "blur"
          },
          {  max: 100, message: '长度不超过100 个字符', trigger: 'blur' }
        ]
        }
      };
    },
    props: {
      //父元素传递的数据
      option: Object
    },
    components: {},
    computed: {
      isShow: {
        //创建用户弹窗是否显示
        get: function () {
          return this.option.isShow;
        },
        set: function (newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    created: function () {

    },
    mounted() {
      this.fileUploadUrl = getGlobalParams.get("ImgUploadAddress");
    },
    watch: {},
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = getGlobalParams.get("ImgDownloadAddress") + '/' + file.name
        this.form.URL = getGlobalParams.get("imagePath") + file.name
      },
      beforeAvatarUpload(file) {
        const isType = file.type == 'image/jpg' || file.type == 'image/bpm' || file.type == 'image/png' ;
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isType) {
          this.$message.error('上传头像图片只能是JPG、BPM、PNG格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isType && isLt2M;
      },
      add() {
        //添加
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.loading = true;
            let resBody = new manage()
            resBody.data.OPERFLAG = this.option.log == '1' ? 'I' : 'U';
            if (this.option.log == "2") {
              resBody.data.ID = this.option.currentRow.ID;
            }
            resBody.data.IMAGENO = this.form.IMAGENO;
            resBody.data.TYPE = this.form.TYPE;
            resBody.data.IMAGENAME = this.form.IMAGENAME;
            resBody.data.IMAGEDESC = this.form.IMAGEDESC
            resBody.data.URL = this.form.URL;
            resBody.data.REMARK1 = this.form.REMARK1;
            resBody.data.REMARK2 = this.form.REMARK2;
            requestYg(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  let mes = this.option.log == "1" ? "新增" : "修改";
                  this.$message({
                    type: "success",
                    message: `坐席状态图标${mes}${response.SYS_HEAD.ReturnMessage}!`
                  });
                  this.isShow = false;
                  this.$emit("refreshTable");
                } else {
                  this.$message({
                    type: "error",
                    message: `${response.SYS_HEAD.ReturnMessage}!`
                  });
                }
                this.loading = false;
              })
              .catch(error => {
                this.loading = false;
              });
            this.$refs.form.clearValidate(); //清楚表单验证
            this.$refs.form.resetFields();
          } else {
            this.$message({
              type: "warning",
              message: "新增 坐席状态图标请输入合法的数据！"
            });
            return false;
          }
        });
      },



      openCreate() {
        //打开弹窗事件
        this.$nextTick(function () {
          if (this.option.log == "2") {
            // this.updateDate();
            this.form = JSON.parse(JSON.stringify(this.option.currentRow));
            this.imageUrl = getGlobalParams.get("ImageDownloadAddress") + '/' + this.form.URL

          } else {}
        })
      },
      updateDate() {
        this.form = JSON.parse(JSON.stringify(this.option.currentRow));
        // this.form.FILTER = this.option.currentRow.FILTER;

      },
      closeUser() {
        //关闭弹窗清楚表单数据并清楚表单验证
        // 重置表单数据
        this.$refs.form.clearValidate(); //清楚表单验证
        this.$refs.form.resetFields();
        this.$emit("refreshTable");
      },
      addType() { //关闭弹窗事件，清楚表单验证
        this.option.isShow = false;
        this.$refs.form.clearValidate();
        this.$refs.form.resetFields();
      },
    },
  };

</script>
<style lang="scss">
.imageIconStyle{
  .el-image__inner{
    vertical-align:middle;
  }
}
</style>
<style lang="scss" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    ;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .content {
    display: flex;
    flex-direction: column;
  }

  .require {
    color: red;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
    font-size: 18px;
  }

  .role {
    width: 95%;
    border: 1px solid #eee;
    border-radius: 4px;
    height: 290px;

    .roleHeader {
      color: #606266;
      font-weight: 500;
      font-size: 14px;
      background: #f5f7fa;
      height: 42px;
      box-sizing: border-box;
      padding: 9px;
      overflow-y: auto;
    }
  }

  .el-card {
    overflow: inherit;
  }

</style>
